﻿<phone:PhoneApplicationPage 
    x:Class="EMOe.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="728" 
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">
	<phone:PhoneApplicationPage.Resources>
		<Style x:Key="bntXcross" TargetType="Button">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
			<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
			<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
			<Setter Property="Padding" Value="10,3,10,5"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="Button">
						<Grid Background="Transparent">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
								<Border.Background>
									<ImageBrush Stretch="Fill" ImageSource="bntXcross.png"/>
								</Border.Background>
								<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Storyboard x:Name="playCopy">
			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="gridCopy">
				<DiscreteObjectKeyFrame KeyTime="0">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Collapsed</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
				<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
				<DiscreteObjectKeyFrame KeyTime="0:0:0.9">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
				<DiscreteObjectKeyFrame KeyTime="0:0:1.2">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Collapsed</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="gridCopy">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</phone:PhoneApplicationPage.Resources>
	<phone:PhoneApplicationPage.Foreground>
		<SolidColorBrush Color="#FF263C83"/>
	</phone:PhoneApplicationPage.Foreground>
	<phone:PhoneApplicationPage.ApplicationBar>
		<shell:ApplicationBar BackgroundColor="Black" ForegroundColor="White">
			<shell:ApplicationBarIconButton IconUri="/icons/cateicon.png" Text="categories" Click="ApplicationBarIconButton_Click"/>
		</shell:ApplicationBar>
	</phone:PhoneApplicationPage.ApplicationBar>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot">
    	<Grid.Background>
    		<ImageBrush ImageSource="BackGroundEmoe.png"/>
    	</Grid.Background>
        <!--Pivot Control-->
        <controls:Pivot Title="" FontFamily="/EMOe;component/Fonts/Fonts.zip#Bauhaus LT Heavy" FontSize="32" Margin="0,52,0,0" Foreground="#DEFFFFFF" Background="#00372D2D">
            <!--Pivot item one-->
            <controls:PivotItem x:Name="pivotAll" Header="all" Margin="12,2,12,0">
                <!--Double line list with text wrapping-->
                <ListBox x:Name="lstEmo" Margin="0,0,-12,0" SelectionChanged="lstEmo_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                          <StackPanel Margin="0,0,0,10" Width="440" Height="80" Orientation="Horizontal" Background="#E60041A9">
							  <StackPanel Width="360">
							  	<TextBlock Text="{Binding emo}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Margin="20,0,0,0" Height="50" Width="380" FontSize="37.333" Foreground="White"/>
							  	<TextBlock Text="{Binding category}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" FontSize="18.667" FontFamily="/EMOe;component/Fonts/Fonts.zip#Bauhaus" Foreground="#CCFFFFFF" Height="25" Width="380" Margin="20,0,0,0"/>
							  </StackPanel>
							  <Button x:Name="btnFav" Content="" Click="btnFav_Click" BorderThickness="0" Padding="0" Width="50" Height="50" Template="{StaticResource bntWhiteStar}" Margin="15,0,0,0" Foreground="{x:Null}" BorderBrush="{x:Null}" Background="{x:Null}" ContentTemplate="{StaticResource bntFav}" Opacity="0.895"/>
                          </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PivotItem>
 
            <!--Pivot item two-->
            <controls:PivotItem x:Name="pivotFav" Header="Favorite" Margin="12,2,12,0"> 
                <!--Triple line list no text wrapping-->
                    <ListBox x:Name="lstFav" Margin="0,0,-12,0" SelectionChanged="lstFav_SelectionChanged" BorderThickness="0,0,3,0">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                            	<StackPanel Margin="0,0,0,10" Width="440" Height="80" Orientation="Horizontal" Background="#FFF33B76" Opacity="0.895">
							  		<StackPanel Width="360">
							  			<TextBlock Text="{Binding emo}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Margin="20,0,0,0" Height="50" Width="380" FontSize="37.333" Foreground="White"/>
							  			<TextBlock Text="{Binding category}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" FontSize="18.667" FontFamily="/EMOe;component/Fonts/Fonts.zip#Bauhaus" Foreground="#CAFFFFFF" Height="25" Width="380" Margin="20,0,0,0"/>
							  		</StackPanel>
							  		<Button x:Name="btnDelete" Content="" Click="btnDelete_Click" Width="50" Height="50" Template="{StaticResource bntDelete}" BorderThickness="0" Margin="20,0,0,0"/>
                          		</StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
            </controls:PivotItem>
            <controls:PivotItem x:Name="pivotAbt" Header="About" Margin="12,2,12,0">
            	<Grid>
            		<TextBlock TextWrapping="Wrap" FontFamily="/EMOe;component/Fonts/Fonts.zip#Bauhaus" FontSize="24" Margin="10"><Run FontSize="26.667"/><LineBreak/><Run FontSize="26.667" Text="Emoe' version 1.0"/><LineBreak/><Run FontSize="26.667" Text="Copyright (c) 2011"/><LineBreak/><Run/><LineBreak/><Run Text="Developer:"/><LineBreak/><Run FontSize="21.333" Text="Wannapon Suraworachet Nuntawat Sawasratanathon Sutatpan Vindubrahmanakula Sujinda Wiwatrangkul"/><LineBreak/><Run/><LineBreak/><Run FontSize="21.333" Text="This application is collaboration between "/><LineBreak/><Run FontSize="21.333" Text="Ms."/><Run FontSize="21.333" Text="Wannapon Suraworachet, Mr.Nuntawat Sawasratanathon, Mr.Sutatpan Vindubrahmanakula, Ms.Sujinda Wiwatrangkul and"/><Run FontSize="21.333" Text=" "/><LineBreak/><Run FontSize="21.333" Text="Microsoft Innovation Center - Bangkok, Thailand."/></TextBlock>
            	</Grid> 
                <!--Triple line list no text wrapping-->
            </controls:PivotItem>
        </controls:Pivot>
        <Grid x:Name="gridCopy" Background="#CC000000" Visibility="Collapsed">
        	<TextBlock TextWrapping="Wrap" Text="Copy" FontSize="40" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,260,0,0" FontFamily="/EMOe;component/Fonts/Fonts.zip#Bauhaus"/>
        	<TextBlock x:Name="txtEmo" TextWrapping="Wrap" Text="Copy" FontSize="40" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,350,0,0"/>
        </Grid>
    </Grid>
 
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>